<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			ul {
				width: 805px;
				height: 320px;
				margin: 100px auto;
				box-shadow: 0 0 10px black;
				overflow: hidden;
				
			}
			
			ul>li {
				float: left;
				list-style: none;
				width: 160px;
				border-left: 1px solid gray;
				transition: all 1s; 
				position: relative;
			}
			ul>li>p{
				width: 640px;
				position: absolute;
				left: 0;
				bottom: 0;
				/*使用padding上下距离一样就是垂直居中*/
				padding: 30px 0px 30px 30px ;
				background-color: rgba(0,0,0,0.5);
				color: white;
			}
			/*先把所有li变短*/
			ul:hover>li {
				width: 40px;
			}
			/*再把摸到的当前li变长*/
			ul>li:hover {
				width: 640px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<img src="imgfq/img1.jpg" />
				<p>img1</p>
			</li>
			<li>
				<img src="imgfq/img2.jpg" />
				<p>img2</p>
			</li>
			<li>
				<img src="imgfq/img3.jpg" />
				<p>img3</p>
			</li>
			<li>
				<img src="imgfq/img4.jpg" />
				<p>img4</p>
			</li>
			<li>
				<img src="imgfq/img5.jpg" />
				<p>img5</p>
			</li>
		</ul>
	</body>
</html>